<template>
  <h2>toRefs的使用</h2>
  <!-- <h3>name: {{state.name}}</h3>
  <h3>age: {{state.age}}</h3> -->

  <h3>name: {{name}}</h3>
  <h3>age: {{age}}</h3>

  <h3>name2: {{name2}}</h3>
  <h3>age2: {{age2}}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

function useFeatureX() {
  const state = reactive({
    name2: '自来也',
    age2: 47
  })
  return {
    ...toRefs(state)
  }
}
export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      name: '自来也',
      age: 47
    })
    // toRefs 可以把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref
    const state2 = toRefs(state)
    // 定时器
    setInterval(() => {
      state.age +=1
      // state2.age.value +=1
      console.log('====')
    }, 2000)

    const {name2, age2} = useFeatureX()
    return {
      //state,
      // ...state // 不是响应式的数据
      ...state2,
      name2, age2
    }
  }
});
</script>